<template>
  <el-container>
    <el-header>
      <div style="width: 100%">
        <navigator></navigator>
      </div>
    </el-header>
    <el-main class="challenge-main">
      <h1 class="title">挑战赛</h1>
      <p1 class="introduction">一个给用户提供条件单在今后市场测试的竞赛平台</p1>
      <el-input
        placeholder="search"
        class="input-with-select"
        v-model="input1"
      >
        <template #append>
          <el-button icon="el-icon-search" @click="doSearch">搜索</el-button>
        </template>
      </el-input>
      <div v-if="isAdmin === '1' || isAdmin === 1">
        <el-button class="button" @click="launch" :hidden="hidden">发起挑战赛</el-button>
      </div>
      <h1 class="listUser">我的挑战赛</h1>
      <el-tabs v-model="activeNameUser" class="tabsUser">
        <el-tab-pane label="正在进行中" name="firstUser">
          <div v-if="challengesUser !== null">
            <el-row v-for="challenge in challengesUser.slice((curPageUser-1)*eachPageUser,curPageUser*eachPageUser)" :key="challenge.challengeId">
              <el-card class="challengecard">
                <el-row class="row-details">
                  <el-button type="text" size="medium" class="details" @click="signForChallenge(challenge)">查看详情</el-button>
                </el-row>
                <el-col :span="3">
                  <img src="@/assets/home/img.png"
                       class="image">
                </el-col>
                <el-col :span="20" :offset="1">
                  <el-descriptions :title="challenge.challengeName" class="el-descriptions">
                    <el-descriptions-item label="开始时间：">{{ challenge.startTime }}</el-descriptions-item>
                    <el-descriptions-item label="结束时间：">{{ challenge.endTime }}</el-descriptions-item>
                    <el-descriptions-item label="股票代码：">{{ challenge.stockCode }}</el-descriptions-item>
                    <el-descriptions-item label="起始资金：">{{ challenge.startingFunds }}</el-descriptions-item>
                    <el-descriptions-item label="最大参赛人数：">{{ challenge.maxParticipantsNumber }}</el-descriptions-item>
                    <el-descriptions-item label="参赛人数：">{{ challenge.participantsNumber }}/{{ challenge.maxParticipantsNumber }}</el-descriptions-item>
                  </el-descriptions>
                </el-col>
              </el-card>
            </el-row>
            <el-pagination align='center'
                           @size-change="handleSizeChangeUser"
                           @current-change="handleCurrentChangeUser"
                           :current-page="curPageUser"
                           :page-size="eachPageUser"
                           layout="total, prev, pager, next, jumper"
                           :total="challengesUser.length">
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="已结束" name="secondUser">
          <div v-if="challengesUser !== null">
            <el-row v-for="challenge in challengesEndedUser" :key="challenge.challengeId">
              <el-card class="challengecard" shadow="always">
                <el-row class="row-details">
                  <el-button type="text" size="medium" class="details" @click="signForChallenge(challenge)">查看详情</el-button>
                </el-row>
                <el-col :span="3">
                  <img src="@/assets/home/img.png"
                       class="image">
                </el-col>
                <el-col :span="20" :offset="1">
                  <el-descriptions :title="challenge.challengeName" class="el-descriptions">
                    <el-descriptions-item label="开始时间：">{{ challenge.startTime }}</el-descriptions-item>
                    <el-descriptions-item label="结束时间：">{{ challenge.endTime }}</el-descriptions-item>
                    <el-descriptions-item label="股票代码：">{{ challenge.stockCode }}</el-descriptions-item>
                    <el-descriptions-item label="起始资金：">{{ challenge.startingFunds }}</el-descriptions-item>
                    <el-descriptions-item label="最大参赛人数：">{{ challenge.maxParticipantsNumber }}</el-descriptions-item>
                    <el-descriptions-item label="参赛人数：">{{ challenge.participantsNumber }}/{{ challenge.maxParticipantsNumber }}</el-descriptions-item>
                  </el-descriptions>
                </el-col>
              </el-card>
            </el-row>
          </div>
        </el-tab-pane>
      </el-tabs>
      <h1 class="list">所有挑战赛</h1>
      <el-tabs v-model="activeName" class="tabs">
        <el-tab-pane class="existing" label="正在进行中" name="first">
          <el-row v-for="challenge in challenges.slice((curPage-1)*eachPage,curPage*eachPage)" :key="challenge.challengeId">
            <el-card class="challengecard">
              <el-row class="row-details">
                <el-button type="text" size="medium" class="details" @click="signForChallenge(challenge)">查看详情</el-button>
              </el-row>
              <el-col :span="3">
                <img src="@/assets/home/img.png"
                     class="image">
              </el-col>
              <el-col :span="20" :offset="1">
                <el-descriptions :title="challenge.challengeName" class="el-descriptions">
                  <el-descriptions-item label="开始时间：">{{ challenge.startTime }}</el-descriptions-item>
                  <el-descriptions-item label="结束时间：">{{ challenge.endTime }}</el-descriptions-item>
                  <el-descriptions-item label="股票代码：">{{ challenge.stockCode }}</el-descriptions-item>
                  <el-descriptions-item label="起始资金：">{{ challenge.startingFunds }}</el-descriptions-item>
                  <el-descriptions-item label="最大参赛人数：">{{ challenge.maxParticipantsNumber }}</el-descriptions-item>
                  <el-descriptions-item label="参赛人数：">{{ challenge.participantsNumber }}/{{ challenge.maxParticipantsNumber }}</el-descriptions-item>
                </el-descriptions>
              </el-col>
            </el-card>
          </el-row>
          <el-pagination align='center'
                         @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page="curPage"
                         :page-sizes="[5,10,15,20]"
                         :page-size="eachPage"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="challenges.length">
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane class="finish" label="已结束" name="second">
          <el-row v-for="challengeEnded in challengesEnded" :key="challengeEnded.challengeId">
            <el-card class="challengecard">
              <el-row class="row-details">
                <el-button type="text" size="medium" class="details">查看详情</el-button>
              </el-row>
              <el-col :span="3">
                <img src="@/assets/home/img.png"
                     class="image">
              </el-col>
              <el-col :span="20" :offset="1">
                <el-descriptions :title="challengeEnded.challengeName" class="el-descriptions">
                  <el-descriptions-item label="开始时间：">{{ challengeEnded.startTime }}</el-descriptions-item>
                  <el-descriptions-item label="结束时间：">{{ challengeEnded.endTime }}</el-descriptions-item>
                  <el-descriptions-item label="股票代码：">{{ challengeEnded.stockCode }}</el-descriptions-item>
                  <el-descriptions-item label="起始资金：">{{ challengeEnded.startingFunds }}</el-descriptions-item>
                  <el-descriptions-item label="最大参赛人数：">{{ challengeEnded.maxParticipantsNumber }}</el-descriptions-item>
                  <el-descriptions-item label="参赛人数：">{{ challengeEnded.participantsNumber }}/{{ challengeEnded.maxParticipantsNumber }}</el-descriptions-item>
                </el-descriptions>
              </el-col>
            </el-card>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-main>
  </el-container>
</template>

<script lang="ts" src="./challenge.ts">

</script>

<style scoped>
.el-header{
  padding-inline-end: 0px;
  padding-inline-start: 0px;
}
.challenge-main{
  overflow: hidden;
}
.input-with-select{
  position: absolute;
  width: 500px;
  margin: 10px 150px;
}
.introduction{
  position: absolute;
  margin: 55px -685px;
  font-weight: bold;
}
.title{
  position: absolute;
  margin: 0px 45px;
  font-size: 35px;
}
.list{
  position: absolute;
  margin: -60px 45px;
  font-size: 25px;
}
.listUser{
  position: absolute;
  margin: 120px 45px;
  font-size: 25px;
}
.button{
  width: 180px;
  height: 40px;
  font-size: 17px;
  line-height: 5px;
  color: #003399;
  border-color: rgba(92,92,92,0.58);
  border-width: 2px;
  position: absolute;
  margin: 6px -550px;
}
.tabs{
  margin: -20px 45px;
}
.image {
  height: 110px;
  width: 100px;
}
.challengecard{
  height: 150px;
  width:100%;
}
.el-descriptions{
  width: 200%;
}
.details {
  margin-left: 90%;
  margin-bottom: 0;
  margin-top: 0;
}
.row-details {
  padding-top: 10px;
  margin: -20px;
}
.tabsUser{
  margin: 160px 45px;
}
</style>
